
import { PureComponent } from 'react';
import { isNull } from '../../../utils/helper';
import MToast from '../../Util/MToast';

interface Props {
  value?: any,
  onChange: Function,
  allow_clear?: any,
  disabled?: any,
  readonly?: any,
  list?: any[],
  errorMsg: string,
  horizontal?: any
}
interface State {
  value?: any
}
export default class MySelectDisplay extends PureComponent<Props, State> {
  public state: State = {
    value: this.props.value
  }
  componentWillReceiveProps(nextProps: Props) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      let value = nextProps.value;
      this.setState({
        value
      });
    }
  }
  changeValue = (value) => {
    if (!('value' in this.props)) {
      this.setState({
        value: value
      });
    }
    this.triggerChange(value);
  };

  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  onChange = (value) => {
    this.changeValue(value);
  };

  selectItemClick = (item) => {
    let { code } = item;
    let { value } = this.state;
    let { allow_clear, disabled, readonly } = this.props;
    let isDisabled = disabled == 1;
    let isReadonly = readonly == 1;
    if (isDisabled || isReadonly) {
      return;
    }
    if (allow_clear == 1) {
      if (value === code) {
        this.onChange(undefined)
      }
      else {
        this.onChange(code);
      }
    }
    else {
      this.onChange(code);
    }
  };
  renderItem = (list) => {
    let { horizontal } = this.props;
    let { value } = this.state;
    let el = [];
    list.map((item, key) => {
      let { name, url, desc, code } = item;
      let img = "image/radio_group_no.png";
      if (code == value) {
        img = "image/radio_group_yes.png";
      }
      el.push(
        <div style={{ fontSiFze: "16px", padding: "8px", borderBottom: horizontal != 1 && key !== list.length - 1 ? "1px solid #f7f7f7" : 0 }} data-flex="dir:left cross:center main:start" key={key} onClick={() => {
          this.selectItemClick(item)
        }}>
          <img style={{ width: '20px', height: "20px", marginRight: "10px" }} src={img} alt="" />
          <div data-flex="dir:left cross:center">
            {
              !isNull(url) ? <img style={{ width: "50px", height: "50px", marginRight: "10px" }} src={url} alt="" /> : null
            }
            <div>
              <p>{name}</p>
              <p style={{ color: "#999", fontSize: "14px", marginTop: "2px" }}>{desc}</p>
            </div>
          </div>
        </div>
      )
    })
    return el
  }
  render() { 
    let { list, errorMsg, horizontal, align = "left" } = this.props;
    let dataFlex = {};
    if (horizontal == 1) {
      dataFlex = {
        "data-flex": "dir:left main:"+align
      }
    }
    return (
      <div style={{ width: "100%" }}>
        <div style={{ padding: "5px 0" }} {...dataFlex}>
          {this.renderItem(list)}
        </div>
        <div className="am-input-error-extra mi" onClick={(e) => {
          e.stopPropagation();
          MToast.info(errorMsg, 2, null, false)
        }} style={{ display: "none", left: "10px" }}
        >
          <img style={{ minWidth: "21px", width: "21px" }} src="image/error_extra.svg" alt="" />
        </div>
      </div>
    )
  }
}